<template>
  <div
    class="vue-flow__node-input" 
    :draggable="true" 
    @dragstart="onDragStart($event, type, initProp)"
  >
    {{ name }}
  </div>
</template>

<script setup>
import useDragAndDrop from './useDnD';

const { onDragStart } = useDragAndDrop()

const type = ref('boolean')
const name = ref('布尔组件')

const initProp = ref({
  id: '',
  type: type.value,
  name: name.value,
  style: {
    handles: {
      left: {
        show: true,
        type: 'source',
      },
      right: {
        show: true,
        type: 'source',
      },
      top: {
        show: false,
        type: 'source',
      },
      bottom: {
        show: false,
        type: 'source',
      },
    },
  },
})
</script>
